import { useState, useEffect } from 'react'

function getDate () {
    const date = new Date()
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    const hour = date.getHours()
    const minute = date.getMinutes()

    return [`${year}年${month < 10 ? '0' + month : month}月${day < 10 ? '0' + day : day}日`, `${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}`]
}
function NowDate () {
    const [year, hour] = getDate()
    const [dateYear, setDateYear] = useState(year)
    const [dateHour, setDateHour] = useState(hour)   

    useEffect(() => {
        const timer = setInterval(() => {
            const [nowYear, nowHour] = getDate()
            setDateYear(nowYear)
            setDateHour(nowHour)
        }, 60000)

        return () => {
            if(timer) {
                clearInterval(timer)
            }
        }
    }, [])
    return <li>
    <p className='ft-34'>{ dateYear }</p>
    <p className='ft-20'>{ dateHour }</p>
  </li>
}

export default NowDate